<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>分析按键</title>

    <script src="/static/js/js_lib/jquery.v3.3.1.min.js"></script>
    <script src="/static/js/config.js"></script>
    <script src="/static/js/js_lib/echart.v4.0.4.min.js"></script>
    <script src="/static/js/layer/layer.js"></script>

    <style>
        .line-chart {
            width: 100%;
            height: 500px;
            top: 50px;
        }
        .nav{
            text-align: center;
            top: 30px;
        }
        .nav input{
            width: 50px;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="/static/index.html"><button>回到首页</button></a>
        周期:&nbsp;&nbsp;<input id="period" value="5" type="number" min="0"/> 
        偏移:&nbsp;&nbsp;<input id="offset" value="0" type="number" min="0"/>
        top:&nbsp;&nbsp;<input id="top" value="5" type="number" min="0"/>
        <button onclick="add()">生成图表</button><br>
        将每天的 top 取并集, 绘制图表
    </div>
    <div id="main" class="line-chart"></div>
    <script type="text/javascript">
        const chart = echarts.init(document.getElementById('main'));
        option = {
            title: {
                text: '堆叠区域图'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: []
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                boundaryGap: false,
                data: []
            }],
            yAxis: [{
                type: 'value'
            }],
            series: []
        };
        chart.setOption(option);

        function add() {
            titleList = []
            var period = $("#period").val();
            var offset = $("#offset").val();
            var top = $("#top").val();
            handleGet('/recent_day/' + period + '/' + offset, function (data1) {
                if(data1.code != 0 ){
                    code = localStorage.getItem("errorCode");
                    console.log(code);
                    
                    var a = code.data[data1.code];
                    console.log(a);
                    
                    layer.msg(data1.code);
                    return ;
                }
                // TODO 处理无数据情况
                
                handleGet('/most_key/' + period + '/' + offset + '/' + top, function (data2) {
                    handleGet('/most_key_with_num/' + period + '/' + offset + '/' + top, function (data3) {
                        chart.setOption({
                            xAxis: {
                                data: data1.data
                            },
                            legend: {
                                data: data2.data
                            },
                            series: data3.data
                        });
                    }, null)
                }, null)

            }, function (data) {
                alert('连接失败' + data.responseText)
            });
        }
    </script>
</body>
</html>